<template>
  <div class="container">
    <div class="nav">
      <el-button
        v-for="(item, index) in navList"
        :key="index"
        :type="item.type"
        @click="clickEvt(item.event)"
        >{{ item.text }}
      </el-button>
    </div>
    <div class="map" id="map"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  Scene,
  PolygonLayer,
  CityBuildingLayer,
  LineLayer,
  RasterLayer,
  PointLayer,
} from "@antv/l7";
import { GaodeMap, Map } from "@antv/l7-maps";
import ic_bicycle from "@/assets/img/map/ic_bicycle.png";
import ic_point from "@/assets/img/map/ic_point.png";
const router = useRouter();
const red = ref<HTMLDivElement | null>(null);
let scene: Scene;
let pointLayer: CityBuildingLayer;
let waterLayer: any;
let warnPoint;
let traLayer;
const navList = [
  {
    text: "开启雷达扫描",
    type: "",
    event: "showRadar",
  },
  {
    text: "关闭雷达扫描",
    type: "",
    event: "closeRadar",
  },
  {
    text: "模拟车流",
    type: "",
    event: "showWater",
  },
  // {
  //   text: "事件处理",
  //   type: "",
  //   event: "showEvent",
  // },
  // {
  //   text: "我的轨迹",
  //   type: "",
  //   event: "showTrajectory",
  // },
  {
    text: "返回后台",
    type: "primary",
    event: "return",
  },
];
let popup;
//轨迹路线图
const traData = [
  {
    lng: 120.16338793391446,
    lat: 30.234964136139382,
    lng1: 120.15422271113272,
    lat1: 30.235191131200168,
  },
  {
    lng: 120.15422271113272,
    lat: 30.235191131200168,
    lng1: 120.15920086817437,
    lat1: 30.248467932896702,
  },
  {
    lng: 120.15920086817437,
    lat: 30.248467932896702,
    lng1: 120.17266777601554,
    lat1: 30.241075837495956,
  },
  {
    lng: 120.17266777601554,
    lat: 30.241075837495956,
    lng1: 120.16338793391446,
    lat1: 30.234964136139382,
  },
];
function clickEvt(e: string) {
  if (e === "return") {
    router.push("/home");
  } else if (e === "showWater") {
    showWater();
  } else if (e === "showRadar") {
    showRadar();
  } else if (e === "closeRadar") {
    closeRadar();
  } else if (e === "showTrajectory") {
    showTrajectory();
  }
}
//展示我的轨迹
function showTrajectory() {
  traLayer = new LineLayer({ zIndex: 10 })
    .source(traData, {
      parser: {
        type: "json",
        x: "lng",
        y: "lat",
        x1: "lng1",
        y1: "lat1",
      },
    })
    .shape("line")
    .size(5)
    .color("red");
  scene.addLayer(traLayer);

  requestAnimationFrame(testRequest);
}
function testRequest() {
  let num = 0;
  let redBox = red.value;

  if (redBox) {
    redBox.style.left = "0px";

    function move() {
      num++;
      if (num >= 400) {
        num = 0;
        // cancelAnimationFrame //关闭动画
      } else {
        redBox!.style.left = num + 1 + "px";
      }
      requestAnimationFrame(move);
    }
    requestAnimationFrame(move);
  }
}

//关闭雷达扫描
function closeRadar() {
  pointLayer.style({
    sweep: {
      enable: false,
      sweepRadius: 2,
      sweepColor: "#1990FF",
      sweepSpeed: 0.5,
      sweepCenter: [120.145319, 30.238915],
    },
  });
}
//开启雷达扫描
function showRadar() {
  pointLayer.style({
    sweep: {
      enable: true,
      sweepRadius: 2,
      sweepColor: "#1990FF",
      sweepSpeed: 0.5,
      sweepCenter: [120.165, 30.238915],
    },
  });
}
//开启流水效果
function showWater() {
  waterLayer.filter("", () => true);
}

function init() {
  scene = new Scene({
    id: "map",
    map: new Map({
      style: "dark",
      center: [120.165, 30.238915],
      pitch: 45,
      zoom: 15,
    }),
  });
  scene.on("loaded", () => {
    scene.addImage("ic_bicycle", ic_bicycle);
    scene.addImage("ic_point", ic_point);
    addBaseMap();
    addCityBuild();
  });
  let arr = [];
  scene.on("click", (e) => {
    console.log("e===", e);
    let a = [];
    a[0] = e.lngLat.lng;
    a[1] = e.lngLat.lat;
    arr.push(a);
    console.log(arr);
  });
}
//加载3D城市建筑
function addCityBuild() {
  fetch(
    "https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json"
  ).then(async (res) => {
    pointLayer = new CityBuildingLayer({ zIndex: 9 });
    pointLayer
      .source(await res.json())
      .size("floor", [0, 500])
      .color("rgba(242,246,250,1.0)")
      .animate({
        enable: true,
      })
      // .active({
      //   color: "#0ff",
      //   mix: 0.5,  //数据庞大 可能会导致卡顿
      // })
      .style({
        opacity: 0.7,
        baseColor: "rgb(16, 16, 16)",
        windowColor: "rgb(30, 60, 89)",
        brightColor: "rgb(255, 176, 38)",
      });
    scene.addLayer(pointLayer);
  });

  fetch(
    "https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json"
  )
    .then((data) => data.json())
    .then(({ lakeBorderData, lakeData, landData }) => {
      const lakeLayer = new PolygonLayer()
        .source(lakeData)
        .shape("fill")
        .color("#1E90FF")
        .style({
          opacity: 0.4,
          opacityLinear: {
            enable: true,
            dir: "out", // in - out
          },
        });
      const landLayer = new PolygonLayer()
        .source(landData)
        .shape("fill")
        .color("#3CB371")
        .style({
          opacity: 0.4,
          opacityLinear: {
            enable: true,
            dir: "in", // in - out
          },
        });

      const lakeBorderLayer = new PolygonLayer()
        .source(lakeBorderData)
        .shape("fill")
        .color("#ccc")
        .style({
          opacity: 0.5,
          opacityLinear: {
            enable: true,
            dir: "in", // in - out
          },
        });

      scene.addLayer(lakeLayer);
      scene.addLayer(lakeBorderLayer);
      scene.addLayer(landLayer);
    });

  fetch(
    "https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json"
  )
    .then((res) => res.json())
    .then((data) => {
      waterLayer = new LineLayer({
        zIndex: 0,
        depth: true,
      })
        .source(data)
        .size(1)
        .shape("line")
        .color("#1990FF")
        .filter("", false)
        .animate({
          interval: 1, // 间隔
          duration: 2, // 持续时间，延时
          trailLength: 2, // 流线长度
        });
      scene.addLayer(waterLayer);
    });
}
//加载地形图
function addBaseMap() {
  // 影像底图服务
  const baseLayer = new RasterLayer({
    zIndex: 1,
  });
  baseLayer.source(
    "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    {
      parser: {
        type: "rasterTile",
        tileSize: 256,
        // minZoom: 6,
        // maxZoom: 15,
        zoomOffset: 0,
        // extent: [-180, -85.051129, 179, 85.051129],
      },
    }
  );

  // 影像注记服务
  const annotionLayer = new RasterLayer({
    zIndex: 2,
  });
  annotionLayer.source(
    "https://webst0{1-3}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
    {
      parser: {
        type: "rasterTile",
        tileSize: 256,
        // minZoom: 6,
        // maxZoom: 15,
        zoomOffset: 0,
        // extent: [-180, -85.051129, 179, 85.051129],
      },
    }
  );
  scene.addLayer(baseLayer);
  scene.addLayer(annotionLayer);
}

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  .nav {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .map {
    position: relative;
    margin-left: 10%;
    width: 80%;
    height: calc(100% - 80px);
  }
  .red-box {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 999;
    background-color: red;
  }
}
</style>